<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            border: 1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .form-wrapper {
            padding: 20px;
            border: 1px solid #ddd;
            min-width: 380px;
        }

        .form-wrapper .row {
            margin: 10px 0;
        }

        .form-wrapper .row>label {
            display: inline-block;
            min-width: 4em;
        }
    </style>
</head>

<body>
    <div class="form-wrapper">
        <h1>登录</h1>
        <form id='signInForm'>
            <div class="row">
                <label>邮箱</label>
                <input type="text" name='email'>
                <span class="error"></span>
            </div>
            <div class="row">
                <label>密码</label>
                <input type="password" name='password'>
                <span class="error"></span>
            </div>
            <div class="row">
                <input type='submit' name='提交'>
            </div>
        </form>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        let $form = $('#signInForm')
        $form.on('submit', (e) => {
            e.preventDefault() //不要form提交，我自己提交
            let hash = {}
            let need = ['email', 'password']

            need.forEach((name) => {
                let value = $form.find(`[name=${name}]`).val()
                //    找到name对应的属性，并把它的值传给value
                hash[name] = value
            })
            $form.find('.error').each((index,span) => {
                $(span).text('')//清除所有错误提示
            })
            if (hash['email'] === '' && hash['email'] === 'invalid') {
                $form.find('[name = "email"]').siblings('.error')
                    .text('填邮箱啊童靴')
                return
            }
            if (hash['password'] === '') {
                $form.find('[name = "password"]').siblings('.error')
                    .text('填密码啊童靴')
                return
            }
            $.post('/sign_in', hash)  //使用ajax方法用http post请求从服务器加载数据，
                .then((response) => {     //hash是传给服务器的数据
                    console.log(response)
                }, (request) => {
                    //let object=JSON.parse(request.responseText)
                    // let {errors}=object
                    let { errors } = request.responseJSON
                    $form.find('[name="email"]').siblings('.error')
                        .text('邮箱格式错误')
                })

        })

    </script>
</body>

</html>